<template>
  <div>
    <MyHeader></MyHeader>
    <SecHeader></SecHeader>
    <div class="steps">
      <van-steps :active="active" active-color="#38f">
        <van-step>上报核酸采集信息</van-step>
        <van-step>上报核酸结果</van-step>
        <van-step>社区审核</van-step>
      </van-steps>

    </div>

    <van-empty v-if="nucleinForm.step===3"
               class="custom-image"
               image="static/postForm/passed.png"
               description="🐱‍🏍已审核🐱‍🏍"
               image-size="100"
    />


    <van-empty v-if="nucleinForm.step===2"
               class="custom-image"
               image="static/postForm/Busy-1.png"
               description="🐱‍🏍社区工作者正在疯狂处理中🐱‍🏍"
               image-size="100"
    />

    <van-form @submit="onSubmit" v-if="!nucleinForm.step||nucleinForm.step===1">

      <!--      <van-field-->
      <!--        readonly-->
      <!--        clickable-->
      <!--        name="area"-->
      <!--        :value="pos_value"-->
      <!--        label="地区选择"-->
      <!--        placeholder="点击选择省市区"-->
      <!--        @click="showArea = true"-->
      <!--      />-->
      <!--      <van-popup v-model="showArea" position="bottom">-->
      <!--        <van-area-->
      <!--          :area-list="areaList"-->
      <!--          @confirm="onConfirm"-->
      <!--          @cancel="showArea = false"-->
      <!--        />-->
      <!--      </van-popup>-->


      <div class="postion">
        <van-field
          v-model="nucleinForm.position"
          name="position"
          label="当前地址"
          placeholder="地址"
          :disabled="this.onlyread"
          :rules="[{ required: true }]">

        </van-field>

        <span class="getPos" @click="getPos" v-if="!onlyread">获取地址</span>
      </div>

      <van-field
        v-model="nucleinForm.hospital"
        name="hospital"
        label="检测机构"
        placeholder="检测机构"
        :disabled="this.onlyread"
        :rules="[{ required: true}]"
      />


      <van-field
        readonly
        clickable
        name="calendar"
        :value="time_value"
        label="核酸时间"
        placeholder="点击选择日期"
        @click="showPicker  = !showPicker"
        :disabled="this.onlyread"
        :rules="[{ required: true }]"
      />
      <van-popup v-model="showPicker" position="bottom" v-if="!onlyread">
        <van-datetime-picker
          v-model="now"
          type="datetime"
          title="自定义列排序"
          :columns-order="['year', 'month', 'day', 'hour']"
          :formatter="formatter"
          @confirm="onConfirm2"
        />
      </van-popup>

      <van-field name="method" label="检查方式" :rules="[{ required: true}]">
        <template #input>
          <van-radio-group v-model="nucleinForm.method" direction="horizontal" :disabled="onlyread">
            <van-radio name="single">单检</van-radio>
            <van-radio name="mix">混检</van-radio>
          </van-radio-group>
        </template>
      </van-field>


      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" v-if="!this.nucleinForm.nfid">提交</van-button>
        <van-button round block type="info" native-type="submit" v-if="this.nucleinForm.nfid&&!this.onlyread">修改
        </van-button>

      </div>

    </van-form>

    <van-button class="next" round block type="info" @click="next()"
                v-if="this.nucleinForm.nfid&&!this.onlyread && this.nucleinForm.step !==3 ">
      下一步
    </van-button>

    <div v-if="nucleinForm.step===1">
      <div class="button_result">
        <van-button type="primary" @click="next2(0)" round block>阴性</van-button>
      </div>
      <div class="button_result">
        <van-button type="danger" @click="next2(1)" round block>阳性</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import MyHeader from "../../components/common/MyHeader.vue";
import SecHeader from "../../components/SecHeader.vue";
import areaList from '../../common/area.js';
import {ref} from 'vue';

export default {
  components: {SecHeader, MyHeader},
  inject: ['reload'], // 使用 inject 注入 reload 变量
  name: "PostForm",


  data() {
    return {
      test: 0,
      nucleinForm: {
        position: '',
        method: 'single',
        result: null,
      },

      onlyread: false,
      onlyread2: false,

      active: -1,
      location_lon: '',
      location_lat: '',
      pos_value: '',
      time_value: '',
      created_time: new Date(),
      showArea: false,
      hospital: '',
      showPicker: false,


      now: new Date(),
      maxDate: new Date(),
      minDate: new Date()

    };
  },


  methods: {
    next2(result) {
      this.nucleinForm.result = result
      this.nucleinForm.step = this.nucleinForm.step + 1

      // console.log(this.nucleinForm)
      this.axios.post("/nuclein-form/PostNucleinForm", this.nucleinForm).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.$notify({type: 'success', message: '上传成功'});
            this.reload()
          }
        }
      })
    },


    next() {

      // var nfid = this.nucleinForm.nfid
      this.nucleinForm.step = this.nucleinForm.step + 1

      // console.log(this.nucleinForm)
      this.axios.post("/nuclein-form/PostNucleinForm", this.nucleinForm).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.$notify({type: 'success', message: '上传成功'});
            this.reload()
          }
        }
      })

    },

    formatter(type, val) {
      if (type === 'year') {
        return val + '年';
      }
      if (type === 'month') {
        return val + '月';
      }
      if (type === 'day') {
        return val + '日';
      }
      if (type === 'hour') {
        return val + '时';
      }
      return val;
    },


    setPos() {
      var _this = this
      {

        navigator.geolocation.getCurrentPosition((position) => {
          _this.location_lon = position.coords.longitude
          _this.location_lat = position.coords.latitude

        })
      }

    },

    onConfirm(values) {
      this.pos_value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
    onConfirm2(date) {
      this.created_time = date
      this.time_value = `${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分`;
      this.showPicker = false;
    },
    getPos() {

      // https://api.map.baidu.com/reverse_geocoding/v3/?ak=IfsMrMz9Bppa40oa6dkhNnMKTMl2T8nN&output=json&coordtype=wgs84ll&location=30.330,107.322
      this.axios({
        method: "get",
        url: "/api/testGetApi?location=" + this.location_lat + "," + this.location_lon
      }).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            // 成功通知
            // console.log(resp.data.data.result.formatted_address);
            this.nucleinForm.position = resp.data.data.result.formatted_address;
          }
        }
      })
    },

    onSubmit(values) {
      var nfid = this.nucleinForm.nfid
      this.nucleinForm = values
      this.nucleinForm.created_time = this.created_time
      this.nucleinForm.nfid = nfid

      // console.log(this.nucleinForm)
      this.axios.post("/nuclein-form/PostNucleinForm", this.nucleinForm).then(resp => {
        if (resp) {
          if (resp.data.code == 200) {
            this.$notify({type: 'success', message: '上传成功'});
            this.reload()
          }
        }
      })
    },

    getTodayForm() {
      this.axios({
        method: "get",
        url: "/nuclein-form/getTodayNucleinForm"
      }).then(resp => {
        if (resp) {
          if (resp.data.data) {
            console.log(resp.data.data)
            this.nucleinForm = resp.data.data
            var date = new Date(this.nucleinForm.created_time)
            // date = this.nucleinForm.created_time
            this.time_value = `${date.getMonth() + 1}月${date.getDate()}日${date.getHours()}时${date.getMinutes()}分`;
            this.now = date

            if (this.nucleinForm.step === 0)
              this.active = 0
            else if (this.nucleinForm.step === 1) {
              this.active = 0
              this.onlyread = true
            } else if (this.nucleinForm.step === 2) {
              this.active = 1
              this.onlyread = true
              this.onlyread2 = true

            } else if(this.nucleinForm.step === 3) {

              this.active = 2
            }
            // console.log( this.time_value)
          }
        }
      })
    },

  },

  computed: {
    areaList() {
      return areaList;
    }
  },

  created() {
    this.setPos()
    // var da = new Date()
    // da.setDate(da.getDate()-7)
    // this.minDate = da

    this.getTodayForm()



  }

}
</script>


<style lang="less" scoped>
.postion {
  display: flex;
  align-content: center;
}

.steps {
  margin: 3px;
  border: 2px solid #cecbcb;
}

.getPos {
  width: 20%;
  line-height: 44px;
  font-size: small;
}

.next {
  margin: 5%;
  width: 90%;
}

.button_result {
  text-align: center;
  margin: 20px
}

.custom-image {
  margin-top: 100px;
}


</style>
